<template>
  <div class="setting-content inside-comment">
    <h2 class="setting-header">
      <strong>
        <span>{{componentTitle}}</span>
      </strong>
      <div class="comment-option">
        <el-button v-if="ifAddForm" type="primary" @click="addForm">新增留言表</el-button>
        <el-button type="primary" @click="toFrontDesk" v-if="showFront">前台效果</el-button>
        <div class="change-card">
          <el-tooltip content="卡片展示" placement="bottom" effect="light">
            <a :class="{'active': tableType === 'card'}" href="javascript:;" @click="changeTable('card')"><i class="iconfont">&#xe6c9;</i></a>
          </el-tooltip>
          <el-tooltip content="表格展示" placement="bottom" effect="light">
            <a :class="{'active': tableType === 'table'}" href="javascript:;" @click="changeTable('table')"><i class="iconfont">&#xe6ca;</i></a>
          </el-tooltip>
        </div>
      </div>
    </h2>
    
    <!-- 卡片样式 -->
    <div class="form-card" v-if="tableType === 'card'">
      <div class="form-list" v-if="tableData.length > 0">
        <div class="form-item" v-for="item in tableData" :key="item.id">
          <div class="item-row item-name"><span>名称：</span>{{ item.name }}</div>
          <div class="item-row"><span>说明：</span>{{ item.description }}</div>
          <!-- 内网使用，需要先在设置中打开 -->
          <div class="item-row" v-if="commentSetting?.intranet"><span>内网使用：</span><el-switch v-model="item.intranet" disabled/></div>
        
          <div class="item-row"><span>绑定审核流：</span>
            <el-select v-model="item.procdefId" placeholder="选择审核流" style="width: 240px" disabled>
              <el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item.processDefinitionId" />
            </el-select>
          </div>

          <div class="item-row" v-if="item.classifyFlow && item.classifyFlow.length > 0">
            <p>分类是否需要单独审核：<el-switch v-model="item.isClassifyFlow" disabled/></p>
          </div>

          <div class="item-row" v-if="item.isClassifyFlow">
            <span>设置分类审核流：</span>
            <el-radio-group class="flow-radio br" v-model="item.classifyFlow" disabled>
              <el-radio v-for="option in item.classifyFlow" :key="option.value" :label="option.value">
                <span class="radio-label">{{option.label}}</span>
                <el-select v-model="option.procdefId" placeholder="选择审核流" style="width: 120px" disabled>
                  <el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item.processDefinitionId" />
                </el-select>
              </el-radio>
            </el-radio-group>
          </div>
          <div class="item-row"><span>用户填写内容：</span></div>
          <div class="form-box card">
            <FormRenderer
              :fields="item.content"
              :model-value="{}"
              disabled
              label-width="80px"
            />
          </div>
          <div class="button-container">
            <el-button @click="deleteForm(item)">删除</el-button>
            <el-button @click="showForm(item)">编辑</el-button>
          </div>
        </div>
        
      </div>
      <!-- 无数据 -->
      <div class="ruifox-table-new-no-data" v-else>
        <slot name="noTableData">
          <!-- <i class="iconfont">&#xe642;</i> -->
          <svg t="1728460685872" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8472" width="70" height="70"><path d="M103.424 621.632h13.632c3.84 0 5.76 3.968 5.76 7.872 0 3.84-3.904 5.888-5.76 5.888h-13.632v13.696c0 3.776-4.032 5.76-5.888 5.76-1.92 0-3.904 0-5.888-1.984-1.92-1.856-1.92-1.856-1.92-3.776v-13.696h-13.696c-3.84 0-5.824-4.032-5.824-5.888 0-3.968 3.904-7.872 5.824-7.872h13.696v-13.696c0-3.904 3.904-5.824 7.808-5.824 3.84 0 5.888 1.92 5.888 5.824v13.696z m903.04-54.528v-13.76c0-1.856 0-4.032-1.856-4.032-2.048-1.856-3.904-1.856-5.952-1.856-3.904 0-5.824 1.856-5.824 5.888v13.76h-13.696c-1.92 0-3.968 0-5.76 1.728-1.984 2.112-1.984 4.032-1.984 5.888 0 4.032 3.84 6.08 5.824 6.08h13.76v13.568c0 3.776 3.84 5.888 5.76 5.888 4.032 0 7.872-3.968 7.872-5.888v-13.568h13.568c3.84 0 5.824-3.968 5.824-6.08 0-3.776-3.84-7.616-5.888-7.616h-11.648z m-497.344 224.192H163.776a13.888 13.888 0 0 1-9.728-3.968 14.592 14.592 0 0 1-3.84-9.728c0-7.808 5.824-13.504 13.568-13.504h62.4a63.296 63.296 0 0 1-7.744-27.392V340.736c0-13.632 5.888-29.248 15.616-38.976a54.144 54.144 0 0 1 38.976-15.616h41.024v-13.632c0-13.696 5.76-29.312 15.616-39.04a54.592 54.592 0 0 1 39.04-15.616h329.6c13.696 0 29.312 5.888 38.976 15.616a54.656 54.656 0 0 1 15.68 39.04v397.888a45.824 45.824 0 0 1-7.936 27.456h76.032c7.808 0 13.76 5.632 13.76 13.568a13.44 13.44 0 0 1-13.76 13.568h-163.84v13.632a44.544 44.544 0 0 1-7.68 27.392h7.68c7.936 0 13.76 5.824 13.76 13.568a13.44 13.44 0 0 1-13.76 13.76H585.088a26.688 26.688 0 0 1-3.84 33.088 25.024 25.024 0 0 1-19.456 7.936 25.024 25.024 0 0 1-19.584-7.936l-33.088-35.136z m50.624-27.2h43.008a26.816 26.816 0 0 0 27.328-27.392V338.816c0-15.616-11.84-27.328-25.536-27.328h-331.52a27.84 27.84 0 0 0-27.2 27.328v397.952c0 15.616 11.584 27.392 27.2 27.392h208.704l-7.808-7.936a29.184 29.184 0 0 1-7.808-27.392l-13.696-13.568a98.688 98.688 0 0 1-130.624-13.568 96.32 96.32 0 0 1 3.84-130.688 96.384 96.384 0 0 1 130.816-3.904c38.912 33.152 44.8 89.536 13.696 130.752l13.568 13.568a28.928 28.928 0 0 1 27.264 7.68l48.768 44.992z m97.536-68.288h41.024a26.688 26.688 0 0 0 27.264-27.328V270.592a26.624 26.624 0 0 0-27.264-27.328H370.56a26.624 26.624 0 0 0-27.2 27.328v15.616h259.456c13.632 0 29.184 5.824 38.848 15.616a54.272 54.272 0 0 1 15.616 38.976v355.008zM175.552 192.512h19.456c5.888 0 9.728 3.904 9.728 9.728s-3.84 9.792-9.728 9.792h-19.456v19.456c0 5.888-3.904 9.792-9.728 9.792-2.048 0-5.888-1.92-7.872-3.904s-1.92-3.904-1.92-7.808v-19.456h-21.44c-1.984 0-5.888 0-7.808-3.904-2.048-1.984-3.968-3.904-3.968-7.808 0-5.888 3.968-9.728 9.728-9.728h21.44v-19.584c0-5.888 3.968-9.728 9.728-9.728 5.888 0 9.728 3.84 9.728 9.728v23.424h2.112zM13.632 777.6c0-7.808 5.824-13.504 13.568-13.504h81.92c7.936 0 13.696 5.696 13.696 13.504 0 7.872-5.76 13.696-13.696 13.696H27.2a14.016 14.016 0 0 1-9.728-3.968 14.784 14.784 0 0 1-3.84-9.728z m433.024-87.68a68.288 68.288 0 0 0 0-97.536 68.288 68.288 0 0 0-97.536 0 68.352 68.352 0 0 0 0 97.536 68.16 68.16 0 0 0 97.536 0zM302.272 368.064c0-7.808 5.888-13.632 13.632-13.632h150.208a13.44 13.44 0 0 1 13.696 13.632 13.376 13.376 0 0 1-13.696 13.696H315.968a15.104 15.104 0 0 1-9.728-3.968c-3.968-3.84-3.968-7.744-3.968-9.728z m0 68.288c0-7.808 5.888-13.632 13.632-13.632H534.4a13.44 13.44 0 0 1 13.824 13.632 13.44 13.44 0 0 1-13.824 13.696H315.968a15.04 15.04 0 0 1-9.728-3.904c-3.968-3.968-3.968-5.824-3.968-9.792z m0 68.288c0-7.872 5.888-13.696 13.632-13.696H411.52a13.44 13.44 0 0 1 13.632 13.696 13.312 13.312 0 0 1-13.632 13.632H315.968a14.72 14.72 0 0 1-9.728-3.968c-3.968-1.856-3.968-5.76-3.968-9.664zM40.896 422.72c-15.616 0-27.264-7.808-35.072-21.44-7.808-13.632-7.808-29.312 0-40.96a40.896 40.896 0 0 1 35.072-21.44c23.488 0 41.024 17.536 41.024 40.96 0 23.296-17.536 42.88-41.024 42.88z m0-21.44a20.416 20.416 0 0 0 17.536-9.728 17.856 17.856 0 0 0 0-19.584c-3.84-7.872-9.728-11.712-17.536-11.712a21.632 21.632 0 0 0-21.376 21.504c1.92 11.648 9.792 19.52 21.376 19.52z m850.496-60.544c-15.552 0-29.44-7.744-35.072-21.44a38.464 38.464 0 0 1 0-40.96c7.68-11.776 21.376-21.44 35.072-21.44 23.36 0 40.96 17.536 40.96 40.96-0.064 23.424-19.456 42.88-40.96 42.88z m0-21.44a20.736 20.736 0 0 0 17.536-9.728c3.968-5.888 3.968-13.696 0-21.44a20.48 20.48 0 0 0-17.536-9.728 21.568 21.568 0 0 0-21.44 21.376c0 9.792 9.728 19.52 21.44 19.52z m0 0" fill="#515151" p-id="8473"></path></svg>
          <span>暂无数据</span>
        </slot>
      </div>
    </div>
    <!-- 表格样式 -->
    <div class="form-table" v-else>
      <RuifoxTable
        :loading="tableLoading"
        :table-data="tableData"
        :field-list="fieldList"
        :default-index="true"
        :default-checkbox="true"
      >
        <template #default-checkbox="{ element }">
          <div class="table-div-check">
            <el-checkbox
              class="unmover"
              v-model="element.checked"
              @change="handleCheckTable(element.id)"
              size=""
            />
          </div>
        </template>

        <!-- 是否分类 -->
        <template #isClassifyFlow="{ element }">
          <div>
            <el-tag v-if="element.classifyFlow && element.classifyFlow.length > 0" type="success">是</el-tag>
            <el-tag v-else type="warning">否</el-tag>
          </div>
        </template>

        <!-- 是否内网使用 -->
        <template #intranet="{ element }">
          <div>
            <el-tag v-if="element.intranet == true" type="success">是</el-tag>
            <el-tag v-if="element.intranet == false" type="warning">否</el-tag>
          </div>
        </template>

        <!-- 删除时间列 -->
        <template #updateTime="{ element }">
          {{ dayjs(element.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
        </template>

        <!-- 操作列 -->
        <template #options="{ element }">
          <div class="table-td-option unmover">
            <el-button type="primary" v-if="ifAddForm" link @click="deleteForm(element)">删除</el-button>
            <el-button type="primary" v-if="ifAddForm" link @click="showForm(element)">编辑</el-button>
            <el-button
              v-if="!ifAddForm"
              type="primary"
              size="small"
              link
              @click="recoverForm(element)"
              >恢复</el-button
            >
            <el-button
              v-if="!ifAddForm"
              type="primary"
              size="small"
              link
              @click="showRecycleForm(element)"
              >留言表详情</el-button
            >
          </div>
        </template>
      </RuifoxTable>
    </div>
    <PaginationView
      :isAffix = "false"
      :total="queryData.total"
      :pageSize="queryData.pageSize"
      :currentPage="queryData.currentPage"
      :allChoose="isAllChooseBtn"
      :pageChoose="isPageChooseBtn"
      :options="batchOptions"
      :checkedNum="checkedNum"
      :canChoose="queryData.total > 0"
      @changeSize="handleSizeChange"
      @currentChange="handleCurrentChange"
      @changePageChoose="handlePageChoose"
      @changeAllChoose="handleAllChoose"
      @invertChoose="handleInvertChoose"
      @checkOption="handleBatchOptions"
      @refreshList="getDisableCommentForm"
      @cancelChoose="handleResetPagination"
      v-if="tableData.length > 0"
    />
    <!-- 留言设计对话框 -->
    <el-dialog
      v-model="formVisible"
      :title="formTitle"
      width="750px"
      append-to-body
    >
      <el-form :model="commentData" :rules="formRules" label-width="115px" :disabled="disableRecycle">
        <el-form-item label="名称" prop="name">
          <el-input v-model="commentData.name" placeholder="请输入名称" />
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input v-model="commentData.description" placeholder="请输入说明" />
        </el-form-item>
        <!-- <el-form-item label="审核流" prop="procdefId">
          <el-input v-model="commentData.procdefId" placeholder="请选择审核流" />
        </el-form-item> -->
        <el-form-item label="内网使用" prop="intranet">
          <el-switch v-model="commentData.intranet"/>
        </el-form-item>
        <el-form-item label="审核流" prop="procdefId">
          <!-- <el-tree-select v-model="commentData.procdefId" placeholder="选择栏目" :data="allCategory"
            :props="selectProps" default-expand-all check-strictly style="width: 180px"  /> -->
          <el-select v-model="commentData.procdefId" placeholder="选择审核流" style="width: 255px" :disabled="formTitle == '编辑留言'">
            <el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item.processDefinitionId" :disabled="item.isClassifyFlow" />
          </el-select>
          <el-popover
            placement="top-start"
            :width="220"
            trigger="hover"
            content="留言表设置审核流后不允许修改"
          >
            <template #reference>
              <el-icon color="#ff9700" size="16px" style="margin-left: 5px;"><QuestionFilled /></el-icon>
            </template>
          </el-popover>
          <div v-if="commentData.classifyFlow.length > 0" class="classify-flow">
            <p >
              分类是否需要单独审核
              <el-switch v-model="commentData.isClassifyFlow" @change="initClassifyFlow" :disabled="formTitle == '编辑留言'" />
              
            </p>
          </div>
        </el-form-item>
        <el-form-item v-if="commentData.isClassifyFlow" label="设置分类审核流" prop="classifyFlow">
          <el-radio-group class="flow-radio" v-model="commentData.classifyFlow">
            <el-radio v-for="option in commentData.classifyFlow" :key="option.value" :label="option.value" disabled>
              <span class="radio-label">{{option.label}}</span>
              <!-- <el-tree-select v-model="option.catId" placeholder="选择栏目" :data="allCategory"
                  :props="selectProps" default-expand-all check-strictly style="width: 180px" /> -->
              <el-select v-model="option.procdefId" placeholder="选择审核流" :disabled="formTitle == '编辑留言'" >
                <el-option v-for="item in processList" :key="item.id" :label="item.name" :value="item.processDefinitionId" />
              </el-select>
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <p class="user-item">用户填写内容</p>
        <div class="form-box no-margin-bottom">
          <FormRenderer
            :fields="commentData.content"
            :model-value="{}"
            disabled
            label-width="80px"
          />
          <div class="button-container">
            <el-button @click="showFormDesigner(commentData.content)">编辑</el-button>
          </div>
        </div>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="formVisible = false">取消</el-button>
          <el-button type="primary" @click="saveForm">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 表单设计对话框 -->
    <el-dialog
      v-model="formDesignerVisible"
      title="留言表设计"
      width="1100px"
      append-to-body
    >
      <FormDesigner ref="formDesignerRef" v-model="formData"/>
      <div class="tips">提示：留言表至少有标题和留言，分类改动会出现数据丢失</div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="formDesignerVisible = false">取消</el-button>
          <el-button type="primary" @click="saveFormDesigne">确定</el-button>
        </span>
      </template>
    </el-dialog>

  </div>
</template>
<script setup>
import { ref, reactive, onMounted, defineProps, watch, computed } from "vue";
import { 
  selectListCommentForm,
  insertCommentForm,
  updateCommentForm,
  updateStatusCommentForm,
  batchUpdateStatusCommentForm
 } from "@/api/form";
import FormDesigner from "../components/FormDesigner";
import FormRenderer from "../components/FormRenderer";
import { ElMessage, ElMessageBox } from "element-plus";
import { getProcessList } from "@/api/workflow"
import { selectfunction } from "@/api/setting"; 
import { QuestionFilled } from "@element-plus/icons-vue"; 
import { tableList as mixTable } from "@ruifox-cms/utils";
import dayjs from "dayjs";
import { useStore } from "vuex";
import { useRouter } from "vue-router";

const store = useStore();
const router = useRouter();
const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  fieldList: {
    type: Array,
    default: () => []
  },
  addForm: {
    type: Boolean,
    default: false
  },
  showFront: {
    type: Boolean,
    default: false
  }
})
const ifAddForm = ref(props.addForm)
const componentTitle = ref(props.title)
const defaultCommentData = reactive({
  procdefId: '',
  content: [],
  description: "",
  id: 0,
  name: "",
  isClassifyFlow: false,
  classifyFlow: [],
  mailbox: "",
  intranet: false
})

const formTitle = ref("");
const formVisible = ref(false);
const formDesignerVisible = ref(false);
const applicationForm = ref([]);
const tableData = ref([]);
const formDesignerRef = ref(null);
const formData = ref([]);
const tableType = ref('card');

// 切换表格样式(table: 表格样式，card: 卡片样式)
const changeTable = (type) => {
  tableType.value = type
  console.log("tableType.value",tableType.value);
  
}

let commentData = ref(defaultCommentData);

//获取留言设置
const commentSetting = ref()
const getCommentSetting = async () => {
  const res = await selectfunction()
  commentSetting.value = res.data 
}
getCommentSetting()
// 获取内已发布工作流
const processList = ref([])
const _getProcessList = () => {
  getProcessList().then(res => {
    processList.value = res.data
  })
}
_getProcessList()

//获取启用留言表单
const getCommentForm = async () => {
  const res = await selectListCommentForm({currentPage:1,pageSize:10,isEnabled: ifAddForm.value});
  if (res.code === 20000) {
    // applicationForm.value = res.data;
    applicationForm.value = res.data.list;
  }
  console.log("applicationForm.value",applicationForm.value);
  
};

const {
  queryData,
  tableData: oriTableData,
  tableLoading,
  checkedNum,
  isAllChooseBtn,
  isPageChooseBtn,
  checkedList,
  // getTableData,
  // handleSearch,
  handleCurrentChange,
  handleSizeChange,
  handlePageChoose,
  handleAllChoose,
  handleInvertChoose,
  handleCheckTable,
  handleResetPagination,
} = mixTable({
  getListApi: selectListCommentForm,
});
const defaultQuery = reactive({
  isEnabled: 0,
  currentPage: 1,
  pageSize: 10,
  total:10
});

Object.assign(queryData, defaultQuery);
//获取表格数据 留言表
const getDisableCommentForm = async () => {
  checkedList.value = []
  const res = await selectListCommentForm({currentPage:1,pageSize:10,isEnabled: ifAddForm.value});
  if (res.code === 20000) {
    tableData.value = res.data.list;
    oriTableData.value = res.data.list;
    queryData.total = res.data.total;
  }
  console.log("tableData.value",tableData.value);
};

//新增留言
const addForm = () => {
  formTitle.value = "新增留言";
  formVisible.value = true;
  commentData.value = defaultCommentData
  commentData.value.content = [
    {
        "options": [],
        "name": "biao_ti_cm52",
        "label": "标题",
        "id": "1741073423226",
        "type": "input",
        "required": "true",
        "width": 100,
    },
    {
        "options": [],
        "name": "liu_yan_x3u9",
        "label": "留言",
        "id": "1741073433507",
        "type": "textarea",
        "required": "true",
        "width": 100,
    }
]
  // console.log("defaultCommentData",JSON.parse(JSON.stringify(props.defaultCommentData)));
  // console.log("commentData",commentData.value);
};
const addCommentForm = async () => {
  try {
    const res = await insertCommentForm(commentData.value);
    if (res.code === 20000) {
      
      ElMessage.success("新增留言成功");
    }
  } catch (error) {
    ElMessage.error("新增留言失败");
  } finally {
    modifyData()
  }
}

//保存留言
const saveForm = () => {
  if(formTitle.value == "查看留言"){
    formVisible.value = false;
    return
  }
  // 表单标题校验
  if (!commentData.value.name.trim()) {
    ElMessage({
      showClose: true,
      message: `名称不能为空，请填写`,
      type: 'warning'
    })
    return false
  }
  // if (!commentData.value.description.trim()) {
  //   ElMessage({
  //     showClose: true,
  //     message: `说明不能为空，请填写`,
  //     type: 'warning'
  //   })
  //   return false
  // }
  if (commentData.value.content.length < 1) {
    ElMessage({
      showClose: true,
      message: `留言表不能为空，请填写`,
      type: 'warning'
    })
    return false
  }
  // if(commentData.value.isClassifyFlow == false){
  //   commentData.value.classifyFlow = []
  // }
  if(commentData.value.id == 0){
    addCommentForm()
  } else{
    updateCommentFormData();
  }
  formVisible.value = false;
  getCommentForm();
};

//表单校验
const formRules = reactive({
  name: [
    { required: true, message: '名称不能为空', trigger: 'blur' }
  ],
  // description : [
  //   { required: true, message: '说明不能为空', trigger: 'blur' }
  // ],
  procdefId : [
    { required: true, message: '请选择留言对应审核流', trigger: 'blur' }
  ]
});

//删除留言
const deleteForm = async (item) => {
  ElMessageBox.confirm("是否删除该留言表？", "删除确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      const res = await updateStatusCommentForm(
        {
          formId:item.id,
          state: false
        }
      );
      if (res.code === 20000) {
        ElMessage.success("删除留言表成功");
        await getDisableCommentForm()
      }
    } catch (error) {
      ElMessage.error("删除留言表失败");
      console.error("删除失败",error);
    } finally {
      modifyData()
    }
  })
};
//恢复留言
const recoverForm = async (item) => {
  ElMessageBox.confirm("是否恢复该留言表？", "恢复确认", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(async () => {
    try {
      const res = await updateStatusCommentForm(
        {
          formId:item.id,
          state: true
        }
      );
      if (res.code === 20000) {
        ElMessage.success("恢复留言表成功");
      }
    } catch (error) {
      ElMessage.error("恢复留言表失败");
    } finally {
      modifyData()
    }
  })
};
//设置分类单独审核，默认使用留言审核流
const initClassifyFlow = () => {
  if(commentData.value.isClassifyFlow == true){
    commentData.value.classifyFlow.forEach(item => {
      item.procdefId = commentData.value.procdefId
    });
    console.log("commentData.value",commentData.value);
    
  }
}

//保存留言表单
const saveFormDesigne = () => {
  if (formDesignerRef.value) {
    // 调用子组件暴露的 save 方法
    formDesignerRef.value.save();
  } 
  //更新留言表单
  console.log("formData.value",formData.value);
  formData.value.forEach(element => {
    if(element.type == "classify"){
      commentData.value.classifyFlow = element.options;
      commentData.value.classifyFlow.forEach(element => {
        element.procdefId = ''
      });
    }
  });
  commentData.value.content = formData.value
  // updateCommentFormData()
  formDesignerVisible.value = false;
};

//留言编辑对话框显示
const showForm = (item) => {
  formTitle.value = "编辑留言"
  formVisible.value = true;
  commentData.value = item;
  console.log("item",commentData.value);
};

//查看留言留言对话框显示
const disableRecycle = ref(false)
const showRecycleForm = (item) => {
  formTitle.value = "查看留言"
  formVisible.value = true;
  commentData.value = item;
  disableRecycle.value = true
  // console.log("commentData",commentData.value);
};
//表单编辑对话框显示
const showFormDesigner = (item) => {
  formDesignerVisible.value = true;
  formData.value = item;
};

//更新留言表单
const updateCommentFormData = async () => {
  try {
    const res = await updateCommentForm(commentData.value);
    if (res.code === 20000) {
      getCommentForm();
      ElMessage.success("编辑留言成功");
    }
  } catch (error) {
    ElMessage.error("编辑留言失败");
  }
};
// 表格显示字段
const fieldList = ref(props.fieldList);

//批量删除
const handleBatch = async (state) => {
  let idlist = [];
  idlist = checkedList.value;
  try {
    const res = await batchUpdateStatusCommentForm({
      ids: idlist,
      state: state,
    });
    if (res.code === 20000) {
      if(state == false) {
        ElMessage.success("删除成功");
      } else {
        ElMessage.success("恢复成功");
      }
    }
  } catch (error) {
    if(state == false) {
      ElMessage.error("删除失败");
    } else {
      ElMessage.error("恢复失败");
    }
  } finally {
    checkedList.value = [];
    modifyData()
  }
}

// 批量操作 
const batchOptions = ref([
  { name: "删除", value: "delete", icon: "&#xe74b;" },
]);

const handleBatchOptions = (data) => {
  if (data === "delete") {
    handleBatch(false);
  } else if (data === "recycle") {
    handleBatch(true);
  } 
};

//所有数据修改另一个组件需要再次获取数据
const isRefreshFormList = computed(() => store.state.form.isRefreshFormList);

const modifyData = () => {
  store.commit('form/setIsRefreshFormList', true);
};

watch(isRefreshFormList, (newValue) => {
  if (newValue) {
    getCommentForm();
    getDisableCommentForm();
    //延时一秒
    setTimeout(() => {
      store.commit('form/setIsRefreshFormList', false);
    }, 1000);
    
  }
}, { immediate: false });

//跳转前台预览
const toFrontDesk = () => {
  router.push({ 
    path: '/comment/user/commentFormList', 
  });
}
onMounted(async() => {
  await getCommentForm();
  await getDisableCommentForm()
  if(!ifAddForm.value) {
    tableType.value = 'table'
    batchOptions.value = [
      { name: "恢复", value: "recycle", icon: "&#xe6d5;" }
    ]
  }
});

</script>

<style lang="scss" scoped>
.manage-header {
  margin-top: 10px;
}
.setting-header{
  display: flex;
  justify-content: space-between;
}
.comment-option{
  display: flex;
  align-items: center;
  /* justify-content: space-between; */
  .change-card {
    height: 32px;
    width: 64px;
    box-sizing: border-box;
    border: var(--el-border);
    border-radius: 4px;
    display: flex;
    overflow: hidden;
    margin-left: 20px;

    a {
      display: flex;
      width: 50%;
      height: 100%;
      align-items: center;
      justify-content: center;
    }

    a.active {
      background-color: $mainColor;

      i {
        color: #fff;
      }
    }
  }
}
.form-list {
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-right: -20px;
  .form-item {
    width: 450px;
    min-height: 200px;
    padding: $padding-medium;
    box-sizing: border-box;
    border-radius: 5px;
    border: 1px solid $borderColor;
    margin-right: 20px;
    margin-bottom: 20px;
    color:$black_2;
    .item-name{
      font-size: 16px;
    }
    .item-row {
      font-size: 14px;
      margin-bottom: 10px;
      &.item-name{
        font-size: 18px;
        font-weight: bold;
      }
      span{
        color: $black;
      }
    }
    .button-container{
      display: flex;
      justify-content: end;
      button {
        margin-left: 10px;
      }
    }
  }
}
.classify-flow{
  margin-left: 20px;
  .el-switch{
    margin-left: 10px;
  }
  p{
    display: flex;
    align-items: center;
  }
}
.flow-radio{
  &.br{
    margin-top: 10px;
  }
  .el-radio{
    margin-right: 30px;
    margin-bottom: 10px;
    .radio-label{
      /* margin-right: 10px; */
    }
    .el-select{
      margin-left: 10px;
    }
    &:last-child{
      margin-right: 0;
    }
  }
} 
.form-box{
  padding: 15px 15px 0;
  border: 1px solid $borderColor;
  border-radius: 4px;
  margin-bottom: 10px;
  &.no-margin-bottom{
    margin-bottom: 0;
  }
  .button-container{
    display: flex;
    justify-content: end;
    margin-bottom: 15px;
  }
  &.card{
    ::v-deep .el-radio-group{
      position: relative;
      
    }
  }
  
}
.user-item{
  color: var(--el-text-color-regular);
  margin-bottom: 15px;
}
.tips{
  font-size: 12px;
  margin-top: 10px;
  color: $mainColor;
}
.ruifox-table-new-no-data{
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  padding: 20px 0;
  width: 100%;
  height: 100px;
  svg{
    flex-shrink: 0;
    path{
      fill: #AAAAAA;
    }
  }
  &>i{
    font-size: 100px;
    color: #AAAAAA;
  }
  &>span{
    font-size: 12px;
    color: #AAAAAA;
  }
}
::v-deep .el-date-editor.el-input {
  max-width: 100%;
}
::v-deep .el-input-number {
  max-width: 100%;
}
@media (max-width: 1800px) {
  .form-list .form-item{
    width: calc(33.3% - 20px);
  }
}
@media (max-width: 1600px) {
  .form-list .form-item{
    width: calc(50% - 20px);
  }
}

</style>
